<!-- 
  商品详情分包
 -->
<script setup lang="ts">
  import { ref } from 'vue'
  import { reqGoodsDetail } from '@/api/detail'
  import type { GoodsResult } from '@/types/detail'
  import { onLoad } from '@dcloudio/uni-app'
  import AddressPanel from './components/AddressPanel.vue'
  import ServicePanel from './components/ServicePanel.vue'
  import VkDataGoodsSkuPopup from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue'
  import type { SkuAddCartOrBuyEvent, SkuPopupLocaldata } from '@/types/sku'
  import type { SkuPopupInstance } from '@/types/components'
  import { computed } from 'vue'
  import { reqAddCart } from '@/api/cart'
  import { useUserStore } from '@/stores/user'
  import DetailSkeleton from './components/DetailSkeleton.vue'
  import type { AddressItem } from '@/types/address'
  // 底部安全距离
  const { safeAreaInsets } = uni.getSystemInfoSync()
  const query = defineProps<{
    id: string
  }>()
  // 商品详情数据
  const goodsDetailData = ref<GoodsResult>()
  // 获取商品详情数据
  const getGoodsDetail = async () => {
    const res = await reqGoodsDetail(query.id)
    goodsDetailData.value = res.result
    // 将数据转存到 sku 数据中
    localdata.value = {
      _id: res.result.id,
      name: res.result.name,
      goods_thumb: res.result.mainPictures[1],
      sku_list: res.result.skus.map(item => {
        return {
          _id: item.id,
          goods_id: res.result.id,
          goods_name: res.result.name,
          image: item.picture,
          price: item.price * 100,
          stock: item.inventory,
          sku_name_arr: item.specs.map(val => val.valueName)
        }
      }),
      spec_list: res.result.specs.map(item => {
        return {
          name: item.name,
          list: item.values
        }
      })
    }
  }
  onLoad(() => {
    getGoodsDetail()
  })
  // 商品轮播图的下标
  const currentIndex = ref(1)
  // 滑动商品轮播图片的回调
  const onChangeSwiper: UniHelper.SwiperOnChange = e => {
    // 获取当前图片的下标
    currentIndex.value = e.detail.current + 1
  }
  // 点击图片的查看大图预览
  const onClickImage = (url: string) => {
    uni.previewImage({
      current: url,
      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
      urls: goodsDetailData.value?.mainPictures!
    })
  }

  // 获取弹出层实例
  const popup = ref<{
    open: (type?: UniHelper.UniPopupType) => void
    close: () => void
  }>()
  // 点击地址和服务的弹框
  const popupName = ref<'address' | 'service'>()
  const openPopup = (str: typeof popupName.value) => {
    // 判断哪个被点击
    popupName.value = str
    // 打开弹窗
    popup.value?.open()
  }

  // sku 弹出层是否显示
  const skuShow = ref(false)
  // 准备 sku 数据
  const localdata = ref<SkuPopupLocaldata>()
  // sku 显示模式
  enum Mode {
    /** 都显示 */
    All = 1,
    /** 只显示购物车 */
    Car = 2,
    /** 只显示立即购买 */
    Buy = 3
  }
  const skuMode = ref<Mode>(Mode.All)
  // 显示 sku 弹窗和模式改变的函数
  const skuPopup = (model: Mode) => {
    ;(skuShow.value = true), (skuMode.value = model)
  }
  // 获取 sku 弹出层组件实例
  const skuPopupRef = ref<SkuPopupInstance>()
  // 计算选择规格
  const selectText = computed(() => {
    return skuPopupRef.value?.selectArr.join(' ').trim() || '请选择规格'
  })

  // 点击添加购物车回调
  const useUser = useUserStore()
  const onAddCart = async (e: SkuAddCartOrBuyEvent) => {
    if (useUser.profile?.token) {
      // 已登录
      // 发送请求
      await reqAddCart(e._id, e.buy_num)
      uni.showToast({
        icon: 'success',
        title: '添加成功'
      })
      // 隐藏 sku 弹框
      skuShow.value = false
    } else {
      // 未登录
      uni.showToast({
        icon: 'error',
        title: '请先登录'
      })
      setTimeout(() => {
        uni.navigateTo({
          url: '/pagesMember/login/login'
        })
      }, 400)
    }
  }
  // 点击立即购买的回调
  const onBuyNow = (e: SkuAddCartOrBuyEvent) => {
    if (useUser.profile?.token) {
      // 已登录
      // 跳转到订单页面
      uni.navigateTo({
        url: `/pagesOrder/create/create?skuId=${e._id}&count=${e.buy_num}&addressId=${currentAddressId}`
      })
    } else {
      // 未登录
      uni.showToast({
        icon: 'error',
        title: '请先登录'
      })
      setTimeout(() => {
        uni.navigateTo({
          url: '/pagesMember/login/login'
        })
      }, 400)
    }
    // 关闭 sku 弹框组件
    // 隐藏 sku 弹框
    skuShow.value = false
  }

  // 当前选择的地址
  const currentAddress = ref<AddressItem>()
  // 当前选择的地址的 id
  let currentAddressId = ''
  // 选择好地址的回调
  const getCurrentAddress = (address: AddressItem, addressId: string) => {
    currentAddress.value = address
    currentAddressId = addressId
  }
</script>

<template>
  <scroll-view scroll-y class="viewport" v-if="goodsDetailData">
    <!-- 基本信息 -->
    <view class="goods">
      <!-- 商品主图 -->
      <view class="preview">
        <swiper circular @change="onChangeSwiper">
          <swiper-item v-for="item in goodsDetailData?.mainPictures" :key="item">
            <image mode="aspectFill" :src="item" @click="onClickImage(item)" />
          </swiper-item>
        </swiper>
        <view class="indicator">
          <text class="current">{{ currentIndex }}</text>
          <text class="split">/</text>
          <text class="total">{{ goodsDetailData?.mainPictures.length }}</text>
        </view>
      </view>

      <!-- 商品简介 -->
      <view class="meta">
        <view class="price">
          <text class="symbol">¥</text>
          <text class="number">{{ goodsDetailData?.price }}</text>
        </view>
        <view class="name ellipsis">{{ goodsDetailData?.name }}</view>
        <view class="desc">{{ goodsDetailData?.desc }}</view>
      </view>

      <!-- 操作面板 -->
      <view class="action">
        <view class="item arrow" @click="skuPopup(Mode.All)">
          <text class="label">选择</text>
          <text class="text ellipsis">{{ selectText }}</text>
        </view>
        <view class="item arrow" @click="openPopup('address')">
          <text class="label">送至</text>
          <text class="text ellipsis">
            {{ currentAddress?.address ? currentAddress?.address : '请选择收货地址' }}
          </text>
        </view>
        <view class="item arrow" @click="openPopup('service')">
          <text class="label">服务</text>
          <text class="text ellipsis">无忧退 快速退款 免费包邮</text>
        </view>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="detail panel">
      <view class="title">
        <text>详情</text>
      </view>
      <view class="content">
        <view class="properties">
          <!-- 属性详情 -->
          <view class="item" v-for="item in goodsDetailData?.details.properties" :key="item.name">
            <text class="label">{{ item.name }}</text>
            <text class="value">{{ item.value }}</text>
          </view>
        </view>
        <!-- 图片详情 -->
        <image
          mode="widthFix"
          :src="item"
          v-for="item in goodsDetailData?.details.pictures"
          :key="item"
        ></image>
      </view>
    </view>

    <!-- 同类推荐 -->
    <view class="similar panel">
      <view class="title">
        <text>同类推荐</text>
      </view>
      <view class="content">
        <navigator
          v-for="item in goodsDetailData?.similarProducts"
          :key="item.id"
          class="goods"
          hover-class="none"
          :url="`/pagesDetail/detail/detail?id=${item.id}`"
        >
          <image class="image" mode="aspectFill" :src="item.picture"></image>
          <view class="name ellipsis">{{ item.name }}</view>
          <view class="price">
            <text class="symbol">¥</text>
            <text class="number">{{ item.price }}</text>
          </view>
        </navigator>
      </view>
    </view>
  </scroll-view>
  <!-- 用户操作 -->
  <view
    class="toolbar"
    :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
    v-if="goodsDetailData"
  >
    <view class="icons">
      <button class="icons-button">
        <text class="icon-heart"></text>
        收藏
      </button>
      <!-- #ifdef MP-WEIXIN -->
      <button class="icons-button" open-type="contact">
        <text class="icon-handset"></text>
        客服
      </button>
      <!-- #endif -->
      <navigator class="icons-button" url="/pages/cart/cartCommon" open-type="navigate">
        <text class="icon-cart"></text>
        购物车
      </navigator>
    </view>
    <view class="buttons">
      <view class="addcart" @click="skuPopup(Mode.Car)">加入购物车</view>
      <view class="buynow" @click="skuPopup(Mode.Buy)">立即购买</view>
    </view>
  </view>
  <!-- 骨架屏 -->
  <DetailSkeleton v-else></DetailSkeleton>
  <!-- uni-ui 弹出层 -->
  <uni-popup ref="popup" type="bottom" background-color="#fff" style="z-index: 999">
    <AddressPanel
      v-show="popupName === 'address'"
      @close="popup?.close()"
      @changeAddress="getCurrentAddress"
    ></AddressPanel>
    <ServicePanel v-show="popupName === 'service'" @close="popup?.close()"></ServicePanel>
  </uni-popup>

  <!-- sku 弹出层 -->
  <VkDataGoodsSkuPopup
    ref="skuPopupRef"
    v-model="skuShow"
    buy-now-background-color="#37ba9b"
    add-cart-background-color="#fba86b"
    :localdata="localdata"
    :mode="skuMode"
    :actived-style="{
      color: '#37ba9b',
      backgroundColor: '#E9F8F5',
      borderColor: '#27BA9B'
    }"
    @add-cart="onAddCart"
    @buy-now="onBuyNow"
  ></VkDataGoodsSkuPopup>
</template>

<style lang="scss">
  page {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .viewport {
    background-color: #f4f4f4;
  }

  .panel {
    margin-top: 20rpx;
    background-color: #fff;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
      line-height: 1;
      padding: 30rpx 60rpx 30rpx 6rpx;
      position: relative;
      text {
        padding-left: 10rpx;
        font-size: 28rpx;
        color: #333;
        font-weight: 600;
        border-left: 4rpx solid #27ba9b;
      }
      navigator {
        font-size: 24rpx;
        color: #666;
      }
    }
  }

  .arrow {
    &::after {
      position: absolute;
      top: 50%;
      right: 30rpx;
      content: '\e6c2';
      color: #ccc;
      font-family: 'erabbit' !important;
      font-size: 32rpx;
      transform: translateY(-50%);
    }
  }

  /* 商品信息 */
  .goods {
    background-color: #fff;
    .preview {
      height: 750rpx;
      position: relative;
      .image {
        width: 750rpx;
        height: 750rpx;
      }
      .indicator {
        height: 40rpx;
        padding: 0 24rpx;
        line-height: 40rpx;
        border-radius: 30rpx;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        bottom: 30rpx;
        right: 30rpx;
        .current {
          font-size: 26rpx;
        }
        .split {
          font-size: 24rpx;
          margin: 0 1rpx 0 2rpx;
        }
        .total {
          font-size: 24rpx;
        }
      }
    }
    .meta {
      position: relative;
      border-bottom: 1rpx solid #eaeaea;
      .price {
        height: 130rpx;
        padding: 25rpx 30rpx 0;
        color: #fff;
        font-size: 34rpx;
        box-sizing: border-box;
        background-color: #35c8a9;
      }
      .number {
        font-size: 56rpx;
      }
      .brand {
        width: 160rpx;
        height: 80rpx;
        overflow: hidden;
        position: absolute;
        top: 26rpx;
        right: 30rpx;
      }
      .name {
        max-height: 88rpx;
        line-height: 1.4;
        margin: 20rpx;
        font-size: 32rpx;
        color: #333;
      }
      .desc {
        line-height: 1;
        padding: 0 20rpx 30rpx;
        font-size: 24rpx;
        color: #cf4444;
      }
    }
    .action {
      padding-left: 20rpx;
      .item {
        height: 90rpx;
        padding-right: 60rpx;
        border-bottom: 1rpx solid #eaeaea;
        font-size: 26rpx;
        color: #333;
        position: relative;
        display: flex;
        align-items: center;
        &:last-child {
          border-bottom: 0 none;
        }
      }
      .label {
        width: 60rpx;
        color: #898b94;
        margin: 0 16rpx 0 10rpx;
      }
      .text {
        flex: 1;
        -webkit-line-clamp: 1;
      }
    }
  }

  /* 商品详情 */
  .detail {
    padding-left: 20rpx;
    .content {
      margin-left: -20rpx;
      .image {
        width: 100%;
      }
    }
    .properties {
      padding: 0 20rpx;
      margin-bottom: 30rpx;
      .item {
        display: flex;
        line-height: 2;
        padding: 10rpx;
        font-size: 26rpx;
        color: #333;
        border-bottom: 1rpx dashed #ccc;
      }
      .label {
        width: 200rpx;
      }
      .value {
        flex: 1;
      }
    }
  }

  /* 同类推荐 */
  .similar {
    .content {
      padding: 0 20rpx 200rpx;
      background-color: #f4f4f4;
      display: flex;
      flex-wrap: wrap;
      .goods {
        width: 340rpx;
        padding: 24rpx 20rpx 20rpx;
        margin: 20rpx 7rpx;
        border-radius: 10rpx;
        background-color: #fff;
      }
      .image {
        width: 300rpx;
        height: 260rpx;
      }
      .name {
        height: 80rpx;
        margin: 10rpx 0;
        font-size: 26rpx;
        color: #262626;
      }
      .price {
        line-height: 1;
        font-size: 20rpx;
        color: #cf4444;
      }
      .number {
        font-size: 26rpx;
        margin-left: 2rpx;
      }
    }
    navigator {
      &:nth-child(even) {
        margin-right: 0;
      }
    }
  }

  /* 底部工具栏 */
  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: #fff;
    height: 100rpx;
    padding: 0 20rpx var(--window-bottom);
    border-top: 1rpx solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: content-box;
    .buttons {
      display: flex;
      & > view {
        width: 220rpx;
        text-align: center;
        line-height: 72rpx;
        font-size: 26rpx;
        color: #fff;
        border-radius: 72rpx;
      }
      .addcart {
        background-color: #ffa868;
      }
      .buynow,
      .payment {
        background-color: #27ba9b;
        margin-left: 20rpx;
      }
    }
    .icons {
      padding-right: 10rpx;
      display: flex;
      align-items: center;
      flex: 1;
      .icons-button {
        flex: 1;
        text-align: center;
        line-height: 1.4;
        padding: 0;
        margin: 0;
        border-radius: 0;
        font-size: 20rpx;
        color: #333;
        background-color: #fff;
        &::after {
          border: none;
        }
      }
      text {
        display: block;
        font-size: 34rpx;
      }
    }
  }

  .vk-data-goods-sku-popup .layer .btn-wrapper.data-v-d1e15e37 {
    margin-bottom: 20px;
  }
</style>
